<template>
  <div class="g-movie-container">
    <div class="g-movie-top">
      <div class="g-m-img">图片</div>
      <!-- <img src="../../assets/svgIcon/card_img-online.svg" alt="" class="g-m-pinkIcon" /> -->
      <div class="g-m-pinkIcon">
        <div class="g-m-p-text" style="margin-left: 5px">111</div>
      </div>
      <img class="g-m-leftTab-like" src="../../assets/svgIcon/card_icon_heart.png" alt="" />
      <div class="g-m-rightTab-yc">原创</div>
      <!-- <div class="g-m-rightTab-hj">合集</div> -->
      <!-- <div class="g-m-rightTab-ff">付费</div> -->
      <!-- <div class="g-m-rightTab-sb">首播</div> -->
      <!-- <div class="g-m-rightTab-vip">VIP</div> -->
      <!-- <div class="g-m-rightTab-xm">限免</div> -->
    </div>
    <div class="g-movie-bottom">
      <div class="g-m-mainTitle">主标题</div>
      <div class="g-m-content">
        <!-- <div class="g-m-subhead">副标题</div> -->
        <!-- up   只有是up的时候用户名才会显示出来 -->
        <!-- <img class="g-m-tab-up" src="../../assets/svgIcon/up.svg" alt="" /> -->
        <!-- <div class="g-m-user">用户名称</div> -->
        <!-- 点赞 -->
        <div class="g-m-tab-dz">99w人点赞</div>
        <!-- 广告 -->
        <!-- <img class="g-m-tab-gg" src="../../assets/svgIcon/tag.svg" alt="" /> -->
        <!-- 纪录片 -->
        <!-- <div class="g-m-tab-jlp">纪录片</div> -->
        <!-- 已关注 -->
        <!-- <div class="g-m-tab-ygz">已关注</div> -->
        <!-- 电视剧 -->
        <!-- <div class="g-m-tab-dsj">电视剧</div> -->
        <!-- 影视分类 -->
        <!-- <div class="g-m-tab-ysfl">影视分类</div> -->
        <!-- 频道标签 -->
        <!-- <div class="g-m-tab-pdbq">频道标签</div> -->
        <!-- <div class="g-m-fenlei"></div> -->
        <!-- <img class="g-m-fenlei" src="../../assets/svgIcon/card_icon_more.svg" alt="" /> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FissionFriendsH5Globalsmallchunk',

  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.g-movie-container {
  position: relative;
  width: 168px;
  // height: 148px;
  background: pink;
  border-radius: 4px;
  padding-bottom: 6px;
  // 头部
  .g-movie-top {
    position: relative;
    width: 168px;
    height: 101px;
    background: #c4c4c4;
    .g-m-img {
      width: 100%;
      height: 100%;
      // background-color: pink;
    }
    .g-m-pinkIcon {
      display: flex;
      // justify-content: center;
      align-items: center;
      position: absolute;
      width: 88px;
      height: 24px;
      left: -1px;
      top: -4px;
      // background: url('../../assets/svgIcon/card_img-online.svg') no-repeat center 0px;
      .g-m-p-text {
        position: absolute;
        width: 68px;
        height: 16px;
        left: 6px;
        top: 4px;

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 16px;
        /* identical to box height, or 160% */

        /* message/color-white */
        color: #ffffff;
      }
    }
    .g-m-leftTab-like {
      position: absolute;
      top: 8px;
      left: 8px;
    }
    .g-m-rightTab-yc,
    .g-m-rightTab-hj,
    .g-m-rightTab-ff,
    .g-m-rightTab-sb,
    .g-m-rightTab-vip,
    .g-m-rightTab-xm {
      display: flex;
      justify-content: center;

      padding: 0px 4px;

      position: absolute;
      width: 28px;
      height: 16px;
      right: 8px;
      top: 0px;

      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 10px;
      /* identical to box height, or 160% */

      text-align: center;

      /* message/color-white */

      color: #ffffff;
      border-radius: 0px 0px 4px 4px;
    }
    .g-m-rightTab-yc {
      background: #72c1fb;
      box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
    }
    .g-m-rightTab-hj {
      background: linear-gradient(135deg, #7b61ff 0%, #b5a7ff 100%);
      box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
    }
    .g-m-rightTab-ff {
      background: #fb7299;
      box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
    }
    .g-m-rightTab-sb {
      background: #50c63d;
      box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
    }
    .g-m-rightTab-vip {
      background: linear-gradient(90deg, #f3d3ac 0%, #f7c170 100%);
      box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
      color: #4d3030;
    }
    .g-m-rightTab-xm {
      background: linear-gradient(99.72deg, #dcafff 7.31%, #ff8cad 92.69%);
      box-shadow: 0px 2px 12px rgba(100, 101, 102, 0.12);
    }
  }
  .g-movie-bottom {
    margin: 8px 8px 0 6px;
    .g-m-mainTitle {
      width: 120px;
      height: 16px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      /* identical to box height, or 133% */

      /* text/color-text-primary-dark */

      color: #e7e8ea;
    }
    .g-m-content {
      position: relative;
      margin-top: 6px;
      width: 100%;
      height: 16px;

      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 10px;
      line-height: 16px;
      .g-m-subhead {
        color: #969799;
      }
      .g-m-tab-up,
      .g-m-tab-dz,
      .g-m-tab-gg,
      .g-m-tab-jlp,
      .g-m-tab-ygz,
      .g-m-tab-dsj,
      .g-m-tab-ysfl,
      .g-m-tab-pdbq {
        position: absolute;
        top: 0;
        left: 0;
      }
      // up主
      .g-m-tab-up {
        // background: #747880;
        width: 14px;
        height: 14px;
        // position: absolute;
        top: 2;
      }
      // 广告
      .g-m-tab-gg {
        width: 30px;
      }
      .g-m-tab-dz {
        padding: 0 6px;
        /* Auto layout */
        background: rgba(255, 102, 52, 0.1);
        border-radius: 2px;
      }
      .g-m-user {
        position: absolute;
        top: 0;
        left: 20px;
      }
      .g-m-fenlei {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
</style>
